/*
  学习目标：props的基本使用
  本质: 组件标签身上接收到的属性, 组成一个对象
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    list: [1, 2, 3],
  };

  render() {
    return (
      <div>
        {/* 1. 给标签设置属性   */}
        {/* 注意：💥 字符串不用包{}， 其它的都放在{}中 */}
        <Header name="zs" age={18} list={this.state.list} />
        <Footer name="zs" age={18} list={this.state.list} />
      </div>
    );
  }
}

// 2. 函数式组件通过形参接收props， props是一个对象
function Header(props) {
  return <h1>我是函数式子组件 - {props.name}</h1>;
}

// 3. 函数式组件通过this.props， props是一个对象
class Footer extends React.Component {
  render() {
    console.log('this.props  ----->  ', this.props);
    return (
      <div>
        <h2>我是Footer - {this.props.name}</h2>
      </div>
    );
  }
}
